<!--
 * @Author: Scrooge yu844856744@qq.com
 * @Date: 2023-05-31 10:27:45
 * @LastEditors: Scrooge yu844856744@qq.com
 * @LastEditTime: 2023-06-15 14:37:29
 * @FilePath: /seehoo-design-plus/src/components/sh-search/search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div :class="getComponentClass('sh-search')">
    <sh-form
      :configs="searchConfigs"
      :model="formModel"
      :labelWidth="labelWidth"
      :gutter="20"
      padding="8px 0"
      @saveRef="saveRef"
      @change="changeValue"
    >
    <slot/>
    </sh-form>
    <div class="sh-search-actions">
      <button-list :btn-list="btnList" flex="center" />
      <div v-show="isShowExpandBtn" class="sh-search-expand" @click="onExpand()">
        <span v-if="!isExpand"> 展开<Icon type="ios-arrow-down" /> </span>
        <span v-else> 收起<Icon type="ios-arrow-up" /> </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { useClass } from '../../utils/useClass';
import { useForm } from './utils/useForm';
import { useExpand } from './utils/useExpand';
import { useLayout } from './utils/useLayout';

const props = defineProps({
  // 搜索的结果，也可以在这里定义默认值
  model: {
    type: Object,
    default: () => {},
  },
  // 定义各搜索列表的名称、类型等
  configs: {
    type: Array,
    default: () => [],
  },
  // 各搜索项名称的宽度
  labelWidth: {
    type: Number,
    default: 72,
  },
  // 按钮是否居中
  centerType: {
    type: Boolean,
    default: false,
  },
});
const { getComponentClass } = useClass();
const emits = defineEmits(['change', 'search', 'reset']);

const { searchConfigs, isShowExpandBtn } = useLayout(props);

const { saveRef, formModel, onReset, onSearch, changeValue, setSearchValue, getSearchValue } = useForm(props, emits);

const { isExpand, onExpand } = useExpand(props);

const btnList = reactive([
  {
    label: '重置',
    type: 'default',
    onClick: onReset,
  },
  {
    label: '查询',
    type: 'primary',
    onClick: onSearch,
  },
]);

defineExpose({ setSearchValue, getSearchValue, onReset, onSearch, onExpand });
</script>
